<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f1 {
            width: 800px;
            height: 300px;
            border: 1px solid black;
        }

        .d1 {
            width: 100px;
            height: 100px;
            background: gray;
            float: left;
            margin-right: 100px;
            margin-left: 100px;
            margin-top: 100px;
            margin-bottom: 100px;
        }

        .sky {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-left: 100px;
        }

        .normal2 {
            width: 800px;
            height: 300px;
            border: 1px solid black;
        }

        .d2 {
            width: 100px;
            height: 100px;
            background: orange;
            margin-bottom: 50px;
        }

        .sky2 {
            width: 100px;
            height: 100px;
            background: pink;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <!-- 
    可以使用外边距控制元素的上下左右距离。
        margin提供4个值，分别上、右、下、左 （从左边开始顺时针）
        margin提供1个值，上下左右都生效
        margin提供2个值，分别代表“上下”， “左右”
        margin提供3个值，分别代表“上” “左右”， “下”

        可用 margin-top 等分别设置


    外边距在浮动和非浮动情况下有区别：
        浮动情况下，两个元素外边距是叠加的。
        不浮动情况下，两个<div>会独占一行，而上面<div>的margin-bottom 会与 下面<div>的margin-top重叠
    -->

    <!-- 有浮动的案例 -->
    <div class="f1">
        <div class="d1">d1</div>
        <div class="sky">sky</div>
    </div>


    <!-- 没有浮动的案例 -->
    <div class="normal2">
        <!-- .d2的 margin-bottom 与 .sky2 的margin-top重叠 -->
        <div class="d2"></div>
        <div class="sky2"></div>
    </div>


</body>

</html>